<!--
 * @Author: wangding
 * @Date: 2020-11-04 18:16:13
 * @LastEditTime: 2021-05-28 14:32:38
 * @LastEditors: Please set LastEditors
 * @Description: In User Settings Edit
 * @FilePath: \solaxcloud\src\views\overview-inverter\overview-inverter.vue
-->
<template>
    <div class="overview-inverter-demo" :style='tableHeight1'>
        <!-- {{$t('login.loginName')}} -->
        
        <el-tabs v-model="activeName" @tab-click="setActiveName">
        <!-- <el-tabs v-model="activeName"> -->
            <el-tab-pane :label="$t('charg.device.Analysis')" name="1">
                <overviewInverter v-if="activeName==1" :activeName="activeName" @uploadPage='deviceGetInverterFromRedis' ref="tab-ref-1"></overviewInverter>
            </el-tab-pane>
            
            <el-tab-pane :label="userType==5?$t('alarm.History.new'):$t('alarm.deviceAlarm')" name="3">
                <alarmInv v-if="activeName==3" style="width:100%;" ref="tab-ref-3"></alarmInv>
            </el-tab-pane>
            <el-tab-pane :label="$t('report.statistical_report')" name="6">
                <report v-if="activeName==6" ref="tab-ref-6"></report>
            </el-tab-pane>
        </el-tabs>
        <div class="sn-text-box">
            <div>
                <span>{{$t('charg.device.sn')}}：</span>
                <span class="red-text">
                    {{returnSession('selRow_charg_pileSn')}}
                </span>
            </div>
            <div>
                <span>{{$t('alarm.wifiSn')}}：</span>
                <span class="red-text">
                    {{returnSession('selRow_charg_wifi_sn')}}
                </span>
            </div>
            <div>
                <span>{{$t('test.deviceTest.historyTest.Last_update')}}：</span>
                <span class="red-text">
                    {{uploadTimeValue}}
                </span>
            </div>
            <!-- <div class="right">
                {{$t('monitoring-interval-minute5')}}
            </div> -->
        </div>
    </div>
</template>

<script>
import moment from 'moment'
import overviewInverter from '../overview/overview_charg'
import batteryAnalysis from './batteryAnalysis'
import alarmInv from './alarm/alarm_inv'
import chart from './inverterData/chart'
// import realTimeDisplay from './real-time-display'
import report from './report/report'
export default {
    components: {
        overviewInverter,
        batteryAnalysis,
        alarmInv,
        chart,
        // realTimeDisplay,
        report,
    },
    props: {

    },
    data() {
        return {
            activeName:'1',
            uploadTimeValue:'',
            tableHeight1:'',
            timer:null,
            userType:localStorage.getItem('userType')
        };
    },
    created() {
    },
    beforeDestroy() {
        //清除定时器
        // clearInterval(this.timer);
    },
    mounted() {
        let that = this
        this.tableHeight1 = `height:${document.body.offsetHeight-100}px;`
        window.onresize = () =>{
            that.tableHeight1 = `height:${document.body.offsetHeight-100}px;`
        }
        this.deviceGetInverterFromRedis()

        if(this.timer){
            console.log('初始化清除定时器')
            // clearInterval(this.timer)
        }
        console.log('设置定时器定时器')
        // this.timer=setInterval(()=>{
        //     this.deviceGetInverterFromRedis()
        //     this.$refs["tab-ref-"+this.activeName].initPage()
        // },1000*60*15)
        // console.log("打印定时器"+this.timer+"  activeNanme"+this.activeName)
    },
    methods: {
        setActiveName(){
            // sessionStorage.setItem('activeName',this.activeName)
            this.deviceGetInverterFromRedis()
        },
        async deviceGetInverterFromRedis(){
            let res = await this.API.devchargepileGetUpdateTime({
                pileSn:this.returnSession('selRow_charg_pileSn'),
            })
            this.$store.commit('setDeviceDataList',res)
            this.uploadTimeValue = res
            console.log('更新时间---'+this.uploadTimeValue)
        },
        returnSession(val){
            return sessionStorage.getItem(val)
        }
    },
};
</script>

<style  lang="less" >

.overview-inverter-demo{
    // height: calc(100% - 50px) ;
    font-size: 13px;
    .el-tabs__nav {
        transform: translateX(15px) !important;
    }
    .el-tabs__header {
        margin: 0 0 35px;
    }
    .el-tabs__content{
        padding: 85px 10px 10px 10px;
        margin: 0;
        min-height: 90%;
        background: #efefef;
        min-width: 1200px;
    }
    .el-tabs--top{
        height: 100%;
    }
    .el-tabs__header {
        height: 40px;
        position: fixed;
        width: 100%;
        z-index: 2000;
        background-color: #fff;
    }
    .sn-text-box{
        position: absolute;
        // position: fixed;
        top: 39px;
        display: flex;
        width: 100%;
        box-sizing: border-box;
        padding: 8px 15px;
        background-color: #fff;
        box-shadow: 1px 1px 5px rgba(0,0,0,.2);
        font-size: 12px;
        z-index: 2;
        div {
            margin-right:20px;
            &.right{
                margin-left: auto;
            }
        }
        .red-text{
            color:red;
        }
        
    }
}
</style>
